<script lang="ts" setup>
import type { Editor } from "@/tiptap";
import type { Component } from "vue";

const props = withDefaults(
  defineProps<{
    editor?: Editor;
    title?: string;
    description?: string;
    action?: () => void;
    icon?: Component;
  }>(),
  {
    editor: undefined,
    title: undefined,
    description: undefined,
    action: undefined,
    icon: undefined,
  }
);

const action = () => {
  props.action?.();
};
</script>

<template>
  <div class="toolbox-item" @click="action">
    <div class="toolbox-item-icon">
      <component :is="icon" />
    </div>
    <div class="toolbox-item-content">
      <span class="toolbox-item-title">
        {{ title }}
      </span>
      <span v-if="description" class="toolbox-item-description">
        {{ description }}
      </span>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.toolbox-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem; // gap-2
  border-radius: 0.25rem; // rounded
  padding: 0.25rem; // p-1
  cursor: pointer;

  &:hover {
    background-color: var(--editor-button-hover-bg);

    .toolbox-item-icon {
      background-color: var(--editor-toolbar-bg);
    }

    .toolbox-item-title {
      font-weight: 500; // group-hover:font-medium
      color: var(--editor-button-text-active);
    }
  }
}

.toolbox-item-icon {
  height: 1.75rem; // h-7
  width: 1.75rem; // w-7
  border-radius: 0.25rem; // rounded
  background-color: var(--editor-panel-bg);
  padding: 0.25rem; // p-1
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;

  :deep(*) {
    width: 1rem !important;
    height: 1rem !important;
  }
}

.toolbox-item-content {
  display: flex;
  flex-direction: column;
  gap: 0.125rem; // gap-0.5
}

.toolbox-item-title {
  font-size: 0.875rem; // text-sm
  color: var(--editor-button-text);
}

.toolbox-item-description {
  font-size: 0.75rem; // text-xs
  color: var(--editor-text-color-secondary);
}
</style>
